<template>
	<div class="body">
		<!-- <div class="header">
			<div>
				<img @click="returnGo" src="@/assets/homeimg/滑动左.png" />
				<span>兑换详情</span>
			</div>
		</div> -->
		<div class="card">
			<div class="address">
				<img class="left" src="@/assets/homeimg/地址.png" alt />
				<div class="content">
					<p class="center">
						<span class="name">{{obj.nickname}}</span>
						<span class="tel">{{obj.phone}}</span>
					</p>
					<p class="text">{{obj.address}}</p>
				</div>
			</div>
			<div class="shop">
				<img :src="obj.image" class="shop-left" />
				<div class="shop-r">
					<p class="name">{{obj.name}}</p>
				     <div class="jf">
						 <span class="score">{{obj.score}}积分</span>
						 <span class="price">¥{{obj.price}}</span>
					 </div>
					
				</div>
			</div>
		</div>
		<div class="order">
			<div class="order-c">
				<div class="top">订单信息</div>
				<div class="detail">
					<span>订单编号</span>
					<span>{{obj.order_sn}}</span>
				</div>
				<div class="detail">
					<span>订单数量</span>
					<span>{{obj.tot_num}}</span>
				</div>
				<div class="detail">
					<span>总积分</span>
					<span>{{obj.score_text}}</span>
				</div>
				<div class="detail">
					<span>备注</span>
					<span>{{obj.remark}}</span>
				</div>
				<div class="detail">
					<span>兑换时间</span>
					<span>{{obj.pay_time_text}}</span>
				</div>
				<div class="detail">
					<span>支付状态</span>
					<span>{{obj.status_text}}</span>
				</div>
				<div class="detail">
					<span>订单状态</span>
					<span>{{obj.status}}</span>
				</div>
				<div class="detail" v-show="show">
					<span>快递公司</span>
					<span>{{obj.express_code}}</span>
				</div>
				<div class="detail" v-show="show">
					<span>运单号</span>
					<span>{{obj.expree_no}}</span>
				</div>
			</div>
		</div>
		
	</div>

</template>

<script>
	import integralApi from "@/api/integral";
	export default {
		data() {
			return {
				id: '',
				obj: {},
				show:false
			}
		},
		created() {
			
		},
		mounted() {
			// console.log(this.$route.query)
			this.id = this.$route.query.id;
			this.getRecordDetail();
		},
		methods: {
			returnGo() {
				this.$router.go(-1);
			},
			getRecordDetail() {
				this.$http.post('/api/score/orderDetail',{id:this.id}).then(res => {
					console.log(res)
					this.obj = res.data;
					if(this.obj.status==0){
						this.obj.status='未发货',
						this.show = false;
					}else if(this.obj.status==1){
						this.obj.status='已发货';
						this.show = true;
					}else if(this.obj.status==2){
						this.obj.status='已完成';
						this.show = true;
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.body {
		color: #333333;
		height: 100%;
		display: flex;
		flex-direction: column;
		background: rgba(247, 247, 247, 1);
		background-size: 100% 100%;
	}

	.header {
		// font-weight: bold;
		width: 100%;
		text-align: center;
		height: 2.75rem;
		line-height: 2.75rem;
		padding-top: 1.25rem;
		position: relative;
		background: rgba(255, 255, 255, 1);
		color: #333333;
		font-size: 1.25rem;

		img {
			width: 0.625rem;
			height: 1.125rem;
			position: absolute;
			left: 1rem;
			bottom: 0.75rem;
		}
	}
	// 在scss文件中
	@supports(bottom:constant(safe-area-inset-top)) {
	
		// 如果存在底部安全区域
		.header {
			padding-top: constant(safe-area-inset-top);
	
		}
	
	}
	
	@supports(bottom:env(safe-area-inset-top)) {
	
		// 如果存在底部安全区域
		.header {
			padding-top: env(safe-area-inset-top);
	
		}
	
	}

	.card {
		width: 100%;
		background-color: #ffffff;
		margin-top: 0.625rem;
		padding-bottom: 1.875rem;
	}

	.address {
		width: 100%;
		height: 5rem;
		background-color: #ffffff;
		display: flex;

		.left {
			width: 3.125rem;
			height: 3.125rem;
			border-radius: 50%;
			margin-top: 0.75rem;
			margin-left: 0.625rem;
		}

		.content {
			width: 14.875rem;
			height: 100%;
			margin-left: 0.625rem;

			.center {
				margin-top: 0.3125rem;
				font-family: PingFang SC;
				font-weight: 500;
				line-height: 2.1875rem;

				.name {
					font-size: 0.9375rem;
					color: #333333;
				}

				.tel {
					font-size: 0.75rem;
					color: rgba(102, 102, 102, 1);
					margin-left: 0.3125rem;
				}
			}

			.text {
				font-size: 0.875rem;
				font-family: PingFang SC;
				font-weight: 500;
				color: rgba(51, 51, 51, 1);
				line-height: 1.125rem;
			}
		}

		.right {
			width: 0.375rem;
			height: 0.5625rem;
			margin-top: 2.5rem;
			margin-left: 2.5rem;
		}
	}

	.shop {
		width: 100%;
		display: flex;
		margin-top: 0.625rem;

		.shop-left {
			width: 6.875rem;
			height: 6.875rem;
			margin-left: 1.25rem;
		}

		.shop-r {
			margin-left: 1.25rem;

			.name {
				display: block;
				margin-top: 0.625rem;
				font-size: 0.875rem;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
				line-height: 1.25rem;
			}
            .jf{
				display: flex;
			}
			.score{
				line-height: 1.25rem;
				margin-top: 1.875rem;
				color: rgba(255, 38, 79, 1);
				font-size: 1rem;
			}
			.price {
				display: block;
				font-size: 0.875rem;
				font-family: PingFang SC;
				color: #333333;
				line-height: 1.25rem;
				margin-top: 1.875rem;
				margin-left: 0.3125rem;
				text-decoration: line-through;
			}
		}
	}
    .order{
		width: 100%;
		background-color: #fff;
		padding: 0 4vw;
		box-sizing: border-box;
		.order-c{
			margin: 0 auto;
			padding-bottom: 0.625rem;
			.top{
				width: 100%;
				height: 1.875rem;
				line-height: 30px;
				font-size: 1rem;
				font-weight: blod;
				border-bottom: 1px solid #dbdbdb;
			}
			.detail{
				width: 100%;
				font-size: 0.875rem;
				display: flex;
				color: #999999;
				justify-content: space-between;
				margin-top: 0.625rem;
			}
		}
	}
</style>
